import React, { useContext, useState,use, useEffect, Suspense } from 'react'
import { DemoUseContext,DemousePromise } from './context'
export default function Use() {
  const [state, setState] = useState(0)
  const demoPromise = new Promise((resolve, rejcet) => {
    setTimeout(() => {
      rejcet("异常")
    }, 1000)
  })

  return (
    <div>
      <DemoUseContext.Provider value={{state,setState}}>
        <Child />
      </DemoUseContext.Provider>
      <Suspense fallback={ <>'''''''''''''''''''''''''''''''''''''</> }>
        <Child2 demoPromise={ demoPromise }  />

      </Suspense>
    </div>
  )
}


function Child () {
  const { state, setState } = use(DemoUseContext)
  // or
  // const { state, setState } = useContext(DemoUseContext)
  const add = () => {
    setState((pre) => {
      return pre+1
    })
  }
  return <>
  {/* DemoUseContext.Consumer */}
    { state }
    <button onClick={add}>+1</button>
  </>
}

function Child2 ({ demoPromise }) {
  // 接收promise需要与Suspense搭配使用
  const state = use(demoPromise)
  console.log(state)
  
  //   state  打印为异常
  return (<>
    2222222
  </>)
}